/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
 <div class="content">
   <div class="top">
      <NavBar :title="PDFInfo.name">
        <i  slot="left" class="iconfont icon-arrow-left" style="font-size: 20px; width: 100%;" @click="handlerPDF"></i>
      </NavBar>
   </div>
  <div class="bottom">
    <div class="canvasBox" ref="canvasBox"></div>
      <!-- <canvas width="100%" height="100%" ref="canvas"></canvas> -->
  </div>
 </div>
</template>

<script>
import NavBar from "../../components/NavBar/NavBar.vue";
import PDFJS from "pdfjs-dist";
export default {
  props: {
    PDFInfo: Object,
    handlerPDF: {
      type: Function,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  components: {
    NavBar
  },
  methods: {
    //显示PDF文件
    showPDF() {
      var that = this;
      //创建
      function createPdfContainer(id, className) {
        var width = document.documentElement.clientWidth; //满屏宽度

        var canvasBox = that.$refs.canvasBox;
        var pdfContainer = document.getElementById("pdf-container");
        var canvasNew = document.createElement("canvas");
        canvasNew.id = id;
        canvasNew.className = className;
        $(canvasNew).width('100%');
        // canvasNew.width = '100%';
        canvasBox.appendChild(canvasNew);
      }

      //渲染pdf
      //建议给定pdf宽度
      function renderPDF(pdf, i, id) {
        pdf.getPage(i).then(function(page) {
          var scale = 1.5;
          var viewport = page.getViewport(scale);

          //
          //  准备用于渲染的 canvas 元素
          //

          var canvas = document.getElementById(id);
          var context = canvas.getContext("2d");
          canvas.height = viewport.height;
          canvas.width =  viewport.width;

          //
          // 将 PDF 页面渲染到 canvas 上下文中
          //
          var renderContext = {
            canvasContext: context,
            viewport: viewport
          };
          page.render(renderContext);
        });
      }
      //创建和pdf页数等同的canvas数
      function createSeriesCanvas(num, template) {
        var id = "";
        for (var j = 1; j <= num; j++) {
          id = template + j;
          createPdfContainer(id, "pdfClass");
        }
      }
      //读取pdf文件，并加载到页面中
      function loadPDF(fileURL) {
        PDFJS.getDocument(fileURL).then(function(pdf) {
          //用 promise 获取页面
          var id = "";
          var idTemplate = "cw-pdf-";
          var pageNum = pdf.numPages;
          //根据页码创建画布
          createSeriesCanvas(pageNum, idTemplate);
          //将pdf渲染到画布上去
          for (var i = 1; i <= pageNum; i++) {
            id = idTemplate + i;
            renderPDF(pdf, i, id);
          }
        });
      }
      var URL = this.PDFInfo.URL;
      loadPDF(URL);
    }
  },
  mounted() {
    this.showPDF();
  }
};
</script>

<style lang='less' scoped>
.content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  z-index: 999;
}
.content {
  display: flex;
  flex-direction: column;
  height: 100%;
  .top {
    flex: 0 0 46px;
  }
  .bottom {
    flex: 1;
    color: #fff;
    overflow: hidden;
    .canvasBox {
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%;
    }
  }
}

</style>
